<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情预警</title>
    <link rel='stylesheet' href='css/subpage.css'>
    <link rel="stylesheet" href="css/nav.css">
</head>
<body>
    <div id="container">
        <div id="sub_ear">
            <div class="div_daohang">
                <div style="height: 10px;"></div>
                <div class="menu">
                    <div class="center">
                        <ul class="ul-list">
                            <li><a href="./index.html">首页</a></li>
                            <li><a href="./synopsis.html">舆情简介</a></li>
                            <li><a href="./function.html">平台功能</a></li>
                            <li><a href="./analysis.html">数据分析</a></li>
                            <li><a href="./webspider.html">网络爬虫</a></li>
                            <li><a href="./earlywarning.html">舆情预警</a></li>
                            <li><a href="./report.php">舆情报告</a></li>
                            <li><a href="./contact.php">联系我们</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="none_h"></div>
            <div id="ear_subleft">
                <ul>
                    <li type="disc"><a href="#ear_moku1" class="a_lift">用户态度分析</a></li>
                    <li type="disc"><a href="#ear_moku2" class="a_lift">访问数据占比</a></li>
                    <li type="disc"><a href="#ear_moku3" class="a_lift">事件时间散点</a></li>
                </ul>
            </div>
            <div id="ear_none_s"></div>
            <div id="ear_subright">
                <p class="font_subpa">当前所在位置：&nbsp;&nbsp;<a href="index.html" class="font_subpa">首页</a>&nbsp;&nbsp;>&nbsp;&nbsp;<a href="./earlywarning.html" class="font_subpa">舆情预警</a></p>
                <hr color="#e8e8e8" width="780px">
                <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
                <div id="ear_moku1"></div>
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('ear_moku1'));

                    option = {
                        title : {
                            text: '用户态度分析',
                            subtext: '舆情对用户的态度数据',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            x : 'center',
                            y : 'bottom',
                            data:['malicious','angry','excited','supportive','mind','negative','optional','positive']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true, 
                                    type: ['pie', 'funnel']
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'半径模式',
                                type:'pie',
                                radius : [20, 110],
                                center : ['25%', 200],
                                roseType : 'radius',
                                width: '40%',       // for funnel
                                max: 40,            // for funnel
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : false
                                        },
                                        labelLine : {
                                            show : false
                                        }
                                    },
                                    emphasis : {
                                        label : {
                                            show : true
                                        },
                                        labelLine : {
                                            show : true
                                        }
                                    }
                                },
                                data:[
                                    {value:10, name:'malicious'},
                                    {value:5, name:'angry'},
                                    {value:15, name:'excited'},
                                    {value:25, name:'supportive'},
                                    {value:20, name:'mind'},
                                    {value:35, name:'negative'},
                                    {value:30, name:'optional'},
                                    {value:40, name:'positive'}
                                ]
                            },
                            {
                                name:'面积模式',
                                type:'pie',
                                radius : [30, 110],
                                center : ['75%', 200],
                                roseType : 'area',
                                x: '50%',               // for funnel
                                max: 40,                // for funnel
                                sort : 'ascending',     // for funnel
                                data:[
                                    {value:10, name:'malicious'},
                                    {value:5, name:'angry'},
                                    {value:15, name:'excited'},
                                    {value:25, name:'supportive'},
                                    {value:20, name:'mind'},
                                    {value:35, name:'negative'},
                                    {value:30, name:'optional'},
                                    {value:40, name:'positive'}
                                ]
                            }
                        ]
                    };
                                        
                    myChart.setOption(option); 
                </script>
                <hr color="#e8e8e8" width="780px">
                <div id="ear_moku2"></div>
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('ear_moku2'));

                    var idx = 1;
                    option = {
                        timeline : {
                            data : [
                                '2020-01-01', '2020-02-01', '2020-03-01', '2020-04-01', '2020-05-01',
                                { name:'2013-06-01', symbol:'emptyStar6', symbolSize:8 },
                                '2020-07-01', '2020-08-01', '2020-09-01', '2020-10-01', '2020-11-01',
                                { name:'2020-12-01', symbol:'star6', symbolSize:8 }
                            ],
                            label : {
                                formatter : function(s) {
                                    return s.slice(0, 7);
                                }
                            }
                        },
                        options : [
                            {
                                title : {
                                    text: '访问数据占比',
                                    subtext: '数据流通的浏览器'
                                },
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                legend: {
                                    data:['Chrome','Firefox','Safari','IE9+','Mobile terminal']
                                },
                                toolbox: {
                                    show : true,
                                    feature : {
                                        mark : {show: true},
                                        dataView : {show: true, readOnly: false},
                                        magicType : {
                                            show: true, 
                                            type: ['pie', 'funnel'],
                                            option: {
                                                funnel: {
                                                    x: '25%',
                                                    width: '50%',
                                                    funnelAlign: 'left',
                                                    max: 1700
                                                }
                                            }
                                        },
                                        restore : {show: true},
                                        saveAsImage : {show: true}
                                    }
                                },
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        center: ['50%', '45%'],
                                        radius: '50%',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            },
                            {
                                series : [
                                    {
                                        name:'浏览器（数据纯属虚构）',
                                        type:'pie',
                                        data:[
                                            {value: idx * 128 + 80,  name:'Chrome'},
                                            {value: idx * 64  + 160,  name:'Firefox'},
                                            {value: idx * 32  + 320,  name:'Safari'},
                                            {value: idx * 16  + 640,  name:'IE9+'},
                                            {value: idx++ * 8  + 1280, name:'Mobile terminal'}
                                        ]
                                    }
                                ]
                            }
                        ]
                    };

                    myChart.setOption(option); 
                </script>
                <hr color="#e8e8e8" width="780px">
                <div id="ear_moku3"></div>
                <script type="text/javascript">
                    var myChart = echarts.init(document.getElementById('ear_moku3'));
                
                    option = {
                        title : {
                            text : '事件时间散点图',
                            subtext : 'Event time'
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer:{
                                show: true,
                                type : 'cross',
                                lineStyle: {
                                    type : 'dashed',
                                    width : 1
                                }
                            }
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        dataZoom: {
                            show: true,
                            start : 30,
                            end : 70
                        },
                        legend : {
                            data : ['event']
                        },
                        dataRange: {
                            min: 0,
                            max: 100,
                            orient: 'horizontal',
                            y: 30,
                            x: 'center',
                            //text:['高','低'],           // 文本，默认为数值文本
                            color:['lightgreen','orange'],
                            splitNumber: 5
                        },
                        grid: {
                            y2: 80
                        },
                        xAxis : [
                            {
                                type : 'time',
                                splitNumber:10
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        animation: false,
                        series : [
                            {
                                name:'event',
                                type:'scatter',
                                tooltip : {
                                    trigger: 'axis',
                                    formatter : function (params) {
                                        var date = new Date(params.value[0]);
                                        return params.seriesName 
                                            + ' （'
                                            + date.getFullYear() + '-'
                                            + (date.getMonth() + 1) + '-'
                                            + date.getDate() + ' '
                                            + date.getHours() + ':'
                                            + date.getMinutes()
                                            +  '）<br/>'
                                            + params.value[1] + ', ' 
                                            + params.value[2];
                                    },
                                    axisPointer:{
                                        type : 'cross',
                                        lineStyle: {
                                            type : 'dashed',
                                            width : 1
                                        }
                                    }
                                },
                                symbolSize: function (value){
                                    return Math.round(value[2]/10);
                                },
                                data: (function () {
                                    var d = [];
                                    var len = 0;
                                    var now = new Date();
                                    var value;
                                    while (len++ < 1500) {
                                        d.push([
                                            new Date(2014, 9, 1, 0, Math.round(Math.random()*10000)),
                                            (Math.random()*30).toFixed(2) - 0,
                                            (Math.random()*100).toFixed(2) - 0
                                        ]);
                                    }
                                    return d;
                                })()
                            }
                        ]
                    };

                    myChart.setOption(option); 
                </script>
            </div>
        </div>
    </div>
</body>
</html>